<template>
  <view class="today-page">
    <view v-if="role === '辅导员'">
      <!-- 辅导员看到的今日上报页面 -->
	 <view class="top-text">
	 	请与22.30前上报数据
	 </view>
	 <view class="sec-text">
	 <view class="sec-text-fistchild">2024-2025学年第一学期</view><br>
	   2024年12月08日
	 </view>
	
	 	  <view class="Report-card1-img">
	 		  <text class = Report-card1-img-text>学生总人数</text>
	 	  </view>
	 	  <view class="Report-card2">
			  <view class="Report-card2-1">
	 		  <text>
				  
	 			请假人数：4人
				</text>
				<div>{{'&nbsp;&nbsp;&nbsp;&nbsp;'}}</div>
				<div>
				    <span @click="to_todayleave()">查看名单</span>
				  </div>
				<br></view>
				<br>
				<view class="Report-card2-2">
					<text>
	 			应在人数：9人
				 </text>
				<div>{{'&nbsp;&nbsp;&nbsp;&nbsp;'}}</div>
				<div>
				    <span @click="to_todayroom()">查看名单</span>
				  </div>
				  <br></view>
	 		 
	 	    </view>
		  
	   <view class="Report-card3">
	 	  <view class="container-report">
	 		  <text> 实在人数</text>
	 		  <view class="button-group">
	 			  <button @click="decrease">-</button>
	 			  <text>{{count}}</text>
	 			  <button @click="increase">+</button>
	 			  <br>

	 			  <text> 今日异常状况3人</text>
	 			 <button @click="tomore_functions" style="font-size: 15px;">填写原因</button>
	 		  </view>
	 	  </view>
	   </view>
 
	</view>


    <view v-if="role === '学院'">
      <!-- 学院看到的今日上报页面 -->
      <text>学院的今日上报内容</text>
      <view class="biaoti" >
        请于23:30之前上传数据，谢谢配合
      </view>
      <view>
        2024-2025学年第一学期<br>
        <view class="xiaozi">
          2024年12月08日
        </view>

      </view>
      <view>
        <div class="uni-card"></div>
        <uni-card title="学生总数:12人" >
          <cc-pickerView leftTitle="请假人数" name="orientations" placeholder="" @change="towardPickerChange"
                         :value="value" :range="range"></cc-pickerView>
          <br>
          <cc-pickerView leftTitle="应在人数" name="orientations" placeholder="" @change="towardPickerChange"
                         :value="value" :range="range"></cc-pickerView>
        </uni-card>
      </view>

    </view>
    <view v-if="role === '学校'">
      <!-- 学校看到的今日上报页面 -->
        <view class="content">
          <view class="wenben">
            <text class="text1">2024-2025学年第一学期</text>
            <text class="text2">2024年12月08日</text>
          </view>
          <view class="card1">
          	<view class="card1_1">
          		<text class="text3">学生总数：12人</text>
          	</view>
        		<view class="card1_2">
        			<view class="card1_2_top">
        				<text>请假人数:4人</text>
        				<text>查看名单</text>
        			</view>
        			<view class="card1_2_bot">
        				<text>应在人数:9人</text>
        				<text>查看名单</text>
        			</view>
        		</view>
          </view>
        	<view class="card2">
        		<view class="card2_1">
        			<text>本院今日异常总数:  3人  </text>
        			<text>查看名单</text>
        		</view>
        		<hr />
        		<view class="card2_2">
        			<text class="text4">今日上报关键词：</text>
        		</view>
        		<view class="card2_2">
        			<text class="text5">#校外住宿#：#刚办理走读#</text>
        		</view>
        	</view>
        	<view class="card3">
        		<view class="card3l">
        			<text @click="showContent('content1')">未确认学院（2）</text>
        		</view>
        		<view class="card3r">
        			<text @click="showContent('content2')">已确认学院（2)</text>
        		</view>
        	</view>
        	<view class="card4" v-if="showContent1" >
        		<view class="card4_1">
        			<view class="card4_1l">
        				A学院
        			</view>
        			<view class="card4_1r">
        				2020090911000
        			</view>
        		</view>
        		<view class="card4_2">
        			<text class="text6">学院学生总数：7人<br /><br />请假人数：4人<br /><br />应在人数：3人</text>
        		</view>
        		<view class="card4_3">
        			<text class="text6">确认人姓名：张明<br /><br />工号：10086<br /><br />联系电话：15800000000</text>
        		</view>
        	</view>
        	<view class="card4" v-if="showContent1">
        		<view class="card4_1">
        			<view class="card4_1l">
        				A学院
        			</view>
        			<view class="card4_1r">
        				2020090911000
        			</view>
        		</view>
        		<view class="card4_2">
        			<text class="text6">学院学生总数：7人<br /><br />请假人数：4人<br /><br />应在人数：3人</text>
        		</view>
        		<view class="card4_3">
        			<text class="text6">确认人姓名：张明<br /><br />工号：10086<br /><br />联系电话：8888888888</text>
        		</view>
        	</view>
			<view class="card4" v-if="showContent2" id="card44">
				<view class="card4_1">
					<view class="card4_1l">
			            A学院
					</view>
					<view class="card4_1r">
						2020090911000
					</view>
				</view>
				<view class="card4_2">
					<text class="text6">学院学生总数：7人<br /><br />请假人数：4人<br /><br />应在人数：3人</text>
				</view>
				<hr />
				<view class="card4_4">
					<view class="card4_4t">
						<text>异常人数：3人</text>
						<navigator url="/pages/school/checknamelist">查看名单</navigator>
					</view>
					<text class="card4_4b">异常说明关键词：#校外住宿#</text>
				</view>
				<hr />
				<view class="card4_2">
					<text class="text6">确认人姓名：张明<br /><br />工号：10086<br /><br />联系电话：15800000000</text>
				</view>
			</view>
        </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const role = ref();

// 在页面加载时获取角色信息
onMounted(() => {
  role.value = uni.getStorageSync('userRole');
});

let value = ref(1)
let range = ref(['1', '2', '3', '4', '5'])
let towardPickerChange = function(e) {
  this.value = e.target.value; // 切换的值的索引值
}

	let Confirmed = function(){
		url:navigateTo({
			url:'/pages/school/confirmed'
		})
	}




	/* // 获取当前时间
	const currentHour = new Date().getHours();

	// 定义状态变量来判断时间区间
	const isMorning = ref(currentHour >= 6 && currentHour < 12);
	const isAfternoon = ref(currentHour >= 12 && currentHour < 18);
	const isEvening = ref(currentHour >= 18 && currentHour < 23);
	 */

	/* // 获取当前时间 */
	// const currentHour = new Date().getHours();

	// /* // 定义状态变量来判断时间区间 */
	// const isMorning = currentHour >= 6 && currentHour < 12;
	// const isAfternoon = currentHour >= 12 && currentHour < 18;
	// const isEvening = currentHour >= 18 && currentHour < 22;

	// /* // 定义跳转标识 */
	// const redirected = ref(false);

	// /* // 根据时间进行跳转 */
	// if (isMorning) {
	//   uni.navigateTo({
	//     url: "/pages/leave/more_functions"
	//   });
	//   redirected.value = true;
	// } else if (isAfternoon) {
	//   uni.navigateTo({
	//     url: '/pages/leave/Reporttoday'
	//   });
	//   redirected.value = true;
	// } else if (isEvening) {
	//   uni.navigateTo({
	//     url: '/pages/leave/Reporttoday'
	//   });
	//   redirected.value = true;
	// }


	function tomore_functions(){
		uni.navigateTo({
			url:'/pages/leave/more_functions'
		})
	}

// 定义两个响应式变量，用于控制内容显示
const showContent1 = ref(false);
const showContent2 = ref(false);

// 切换内容显示的函数
const showContent = (card4) => {
  // 先隐藏所有内容
  showContent1.value = false;
  showContent2.value = false;

  // 根据参数显示对应的内容
  if (card4 === 'content1') {
    showContent1.value = true;
  } else if (card4 === 'content2') {
    showContent2.value = true;
  }
};




	let count = ref(0);
	function increase(){
		count.value++;
	}
	function decrease(){
		count.value--
	}
	
	function to_todayleave(){
		uni.navigateTo({
			url:'/pages/leave/todayleave'
		})
	}
	function to_todayroom(){
		uni.navigateTo({
			url:'/pages/leave/todayroom'
		})
	}
	

</script>

<style scoped>
	.content {
	  width: 375px;
	  margin: 0 auto;
	  background-color: #F3F5F9;
	}
	.wenben {
	  display: flex;
	  flex-direction: column;
	}
	.text1 {
	  margin-top: 17px;
	  margin-bottom: 4px;
	  margin-left: 12px;
	  width: 172px;
	  height: 21px;
	  font-size: 15px;
	}
	.text2 {
	  font-size: 12px;
	  margin-left: 12px;
	  color: #5F5F5F;
	}
	.card1 {
		width: 351px;
		height: 154px;
		border: 1px solid;
		border-radius: 12px;
		margin-left: 12px;
		margin-bottom: 12px;
		background-color: #FFFFFF;
	}
	.card1_1 {
		width: 351px;
		height: 72px;
		background-image: url(../static/bg.png);
		border-radius: 12px 12px 0 0;
		display: table;
		margin-bottom: 14px;
	}
	.text3{
		font-size: 12px;
		padding-left: 11px;
		display: table-cell;
		vertical-align: middle;
	}
	.card1_2 {
		display: flex;
		flex-direction: column;
	}
	.card1_2_top,.card1_2_bot,.card2_1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.card1_2_top text:nth-child(1),.card1_2_bot text:nth-child(1){
		padding-left: 12px;
		font-size: 12px
	}
	.card1_2_top text:nth-child(2),.card1_2_bot text:nth-child(2){
		padding-right: 12px;
		color: #006DFF;
		font-size: 12px
	}
	.card2 {
		width: 351px;
		height: 126px;
		border: 1px solid;
		border-radius: 12px;
		margin-left: 12px;
		margin-bottom: 12px;
		background-color: #FFFFFF;
	}
	.card2_1 {
		height: 72px;
		width: 351px;
		display: table;
	}
	.card2_1 text{
		font-size: 12px;
		padding-left: 11px;
		display: table-cell;
		vertical-align: middle;
	}
	.text4 {
		font-size: 12px;
		padding-left: 12px;
	}
	.text5 {
		color: #9C131E;
		font-size: 12px;
		padding-left: 12px;
	}
	.card3 {
		display: flex;
		flex-direction: row;
	}
	.card3l {
		width: 113px;
		height: 30px;
		border-radius: 15px;
		font-size: 12px;
		border: 1px solid;
		line-height: 30px;
		text-align: center;
		margin-left: 12px;
	}
	.card3r {
		width: 113px;
		height: 30px;
		border-radius: 15px;
		border: 1px solid;
		line-height: 30px;
		text-align: center;
	}
	.card3r text {
		font-size: 12px;
	}
	#card44 {
		width: 351px;
		height: 286px;
		border-radius: 12px;
		border: 1px solid;
		margin-top: 12px;
		margin-left: 12px;
		background-color: #FFFFFF;
	}
	.card4 {
		width: 351px;
		height: 212px;
		border-radius: 12px;
		border: 1px solid;
		margin-top: 12px;
		margin-left: 12px;
		background-color: #FFFFFF;
	}
	.card4_1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.card4_1l {
		padding-left: 12px;
		padding-top: 16px;
		font-size: 15px;
		margin-bottom: 8px;
	}
	.card4_1r {
		padding-top: 20px;
		padding-right: 12px;
		font-size: 12px;
	}
	.card4_2,.card4_3 {
		width: 319px;
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		padding-left: 12px;
		margin-bottom: 12px;
	}
	.button {
		font-size: 12px;
	}
	.card4_4 {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 64px;
	}
	.card4_4t {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-top: 12px;
	}
	.card4_4b {
		font-size: 12px;
		padding-left: 12px;
		padding-bottom: 12px;
	}
	.card4_4t text:nth-child(1){
		font-size: 12px;
		padding-left: 12px;
	}
	navigator {
		font-size: 12px;
	}

	/* 提交的样式 */
	.container-report{
		
		padding: 20px;
	}
	.button-group{

		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}
	/* 辅导员端--------------------- */
	.sec-text{
		padding: 5px;
	}
	
	.sec-text-fistchild{
		font-size: 20px;
	}
	
	.top-text{
		display: flex;
		height: 42px;
		width: 100vw;
		background-color: #FFE0C7;
		
		justify-content: center;
		align-items: center;
		
		font-weight: 400;
		font-size: 12px;
	}
	.Report-card2{
		display: flex;
		margin: auto;
		width: 80%;
		
	    padding: 5rpx;
	    background-color: #f8f9fa;
	    border: 1px solid #e9ecef;
	    border-radius: 8rpx;
	    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
	}
	
	.Report-card3{
		display: flex;
		margin: auto;
		margin-top: 40px;
		width: 80%;
		
		padding: 5rpx;
		background-color: #f8f9fa;
		border: 1px solid #e9ecef;
		border-radius: 8rpx;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
	}

	  .Report-card1{
		  /* width: 351px;
		  height: 154px;
		  border: 1px solid;
		  border-radius: 12px;
		  margin-left: 12px;
		  margin-bottom: 12px; */
		  
		    background-color: #f8f9fa;
		    border: 1px solid #dee2e6;
		    border-radius: 8px;
		    padding: 20px;
		    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	  }
	  .Report-card1-img{
		    display: flex;
			margin: auto;
			margin-top:20px;
			
		  	width: 351px;
		  	height: 72px;
		    background-image: url(../static/bg.png);
		  	border-radius: 12px 12px 0 0;
		  	border-radius: 12px 12px 0 0;
		  	display: table;
			margin-bottom: -5px;
	  }
	  .Report-card1-img-text{
		 /* font-size: 12px;
		  padding-left: 11px;
		  display: table-cell;
		  vertical-align: middle; */
		  font-size: 18px;
		    font-weight: bold;

	  }
	  .Report-card2 {
	    display: flex;
	    justify-content: space-between;
	  }
	  .Report-card2-1,
	  .Report-card2-2 {
	    width: 48%;
	    background-color: #e9ecef;
	    padding: 15px;
	    border-radius: 8px;
	  }
	  
	  .Report-card2-1 span,
	  .Report-card2-2 span {
	    color: #007bff;
	    cursor: pointer;
	    text-decoration: underline;
	  }
	  /* 提交的样式 */
	  
</style>
